<template>
    <div id="stacked"></div>
  </template>
  <script setup>
  import echarts from "echarts";
  import { onMounted } from "vue";
  const props = defineProps({
    yearRenewal: {
      required: true,
      type: Array,
      default: [],
    },
  });
  const { yearRenewal } = toRefs(props);
  onMounted(() => {
    watch(
      () => props.yearRenewal,
      () => {
        const projectRenewNumArr = ref([]);
        const drillRenewNumArr = ref([]);
        const yearsArr = ref([]);
        projectRenewNumArr.value = yearRenewal.value.map(item=>{return item.projectRenewNum})
        drillRenewNumArr.value = yearRenewal.value.map(item=>{return item.drillRenewNum})
        yearsArr.value = yearRenewal.value.map(item=>{return item.years})
        echarts.init(document.getElementById("stacked")).dispose();  
        let myChart = echarts.init(document.getElementById("stacked"));
        
        const option = {
          color:['#FFE600', '#FF4949'],
          tooltip: {
            trigger: "axis",
          },
          legend: {
            top:20,
            itemHeight: 10,
            itemWidth: 10,
            data: [
              {
                name: "项目",
                icon: "rect",
              },
              {
                name: "钻孔",
                icon: "rect",
              },
            ],
            formatter: ["{a|{name}}"].join("\n"),
            textStyle: {
              color: "#fff",
              rich: {
                a: {
                  width: 60,
                  color: "#fff",
                  fontSize: 12,
                  textAlign: "center",
                  lineHeight: 20,
                },
                b: {
                  width: 10,
                },
              },
            },
          },
  
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          dataZoom: [//滑动条
          {
            xAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条，不影响使用
            type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 6, // 一次性展示几个。
          }
       	  ],
          xAxis: {
            type: "category",
            boundaryGap: false,
            // data: arr.value,
            data: yearsArr.value,
            textStyle: {
              color: "#FFFFFF",
            },
            // x轴样式
            axisLine: {
              lineStyle: {
                color: "#30374A",
                show: false,
              },
            },
            //x轴文字的配置
            axisLabel: {
              fontSize: 12,
              textStyle: {
                color: " #fff",
              },
            },
          },
          yAxis: {
            type: "value",
            textStyle: {
              color: "#FFFFFF",
            },
            // y轴样式
            axisLine: {
              show: false,
              lineStyle: {
                color: "transparent",
              },
            },
            axisLabel: {
              //y轴文字的配置
              textStyle: {
                color: "rgba(255,255,255,0.5)",
              },
            },
            // 背景线条
            splitLine: {
              lineStyle: {
                color: "rgba(71,90,219,0.5)",
                type: "dashed",
              },
            },
          },
          series: [
          {
            name: '项目',
            type: 'line',
            // stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
                //区域填充渐变颜色
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(255,230,0,1)', // 0% 处的颜色
                        },
                        {
                          offset: 0.5,
                          color: 'rgba(255,230,0.3)', // 50% 处的颜色
                        },
                        {
                          offset: 1,
                          color: 'rgba(255,230,0,0)', // 100% 处的颜色
                        },
                    ],
                      global: false, // 缺省为 false
                    },
                },
                data: projectRenewNumArr.value
            },
            {
            name: '钻孔',
            type: 'line',
            // stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
                //区域填充渐变颜色
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(255,73,73,1)', // 0% 处的颜色
                        },
                        {
                          offset: 0.7,
                          color: 'rgba(255,73,73,0.4)', // 70% 处的颜色
                        },
                        {
                          offset: 1,
                          color: 'rgba(255,73,73,0)', // 100% 处的颜色
                        },
                    ],
                      global: false, // 缺省为 false
                    },
                },
                data: drillRenewNumArr.value
            },
          ],
        }
        var timer = null;
      // 使用刚指定的配置项和数据显示图表。
      timer = setInterval(function () {
      // 每次向后滚动一个，最后一个从头开始；
      // SData.length - 1 为数组的长度，索引从0开始，所以长度减一；
      if (option.dataZoom[0].endValue == props.yearRenewal.length - 1) {
        option.dataZoom[0].endValue = 6;
        option.dataZoom[0].startValue = 0;
      }
      else {
        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
      }
      myChart.setOption(option,true); // 这条不能省略；

}, 2000);
myChart.setOption(option,true);
        window.onresize = function () {
          // 自适应大小
          myChart.resize();
        };
      },{ deep: true, immediate: true }
    );
  });
  </script>
  <style lang="scss" scoped>
  #stacked {
    width: 440px;
    height: 220px;
    margin: 0px 0 0 0;
    color: #fff;
  }
  </style>
  